<template>
    <div class="P-lsit">
        <list :data="orders" :name="name"></list>
        <div>
            <button @click="other">去另一个页面 {{ $route.params }}</button>
        </div>
        <div><router-link to="/list/3">去 /list/3 </router-link></div>
    </div>
</template>

<script>
import list from "@/components/list";
import ordercard from "@/components/cards/card-order";
import { mapState, mapMutations } from "vuex";
export default {
    data: function () {
        return {
            orders: [
                {
                    id: 1,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 12.5,
                    status: 2,
                },
                {
                    id: 2,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 22.5,
                    status: 1,
                },
                {
                    id: 3,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                },
                {
                    id: 4,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                },
                {
                    id: 5,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                },
                {
                    id: 6,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                },
                {
                    id: 7,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                },
                {
                    id: 8,
                    shop_name: "天猫旗舰店",
                    name: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0,
                }
            ],
            name: ordercard
        };
    },
    components: {
        list,
    },
    computed: {
        ...mapState({
            "user/user": 'user'
        }),
    },
    methods: {
        ...mapMutations(['setRedirectUrl']),
        other() {
            this.$router.push("/list/3");
        },
        showTip() {
            this.toggleTpast(true);
            setTimeout(() => {
                this.toggleToast(false);
            }, 2000);
        },
        toggleToast(bool) {
            this.showToast = !this.showToast;
        },
    },
    beforeMount() {
        console.log("list beforMount");
    },
    mounted() {
        // 清空数据
        // this.setRedirectUrl('');
        console.log("list mounted");
        this.$bus.$on("oncard",  ({ type, data })=> {
            // console.log(item);
            console.log("list 逻辑在 页面触发了");
            this.confirmed = true;
            this.$router.push('/form');
            // switch (type) {
            //     case "card":
            //         // console.log(data);
            //         // setRedirectUrl
            //         // 判断是否登陆，如果未登录，踢去 /login 页面
            //         console.log(this.user);
            //         this.confirmed = true;
            //         if (this.user && this.user.id) {
            //             this.$router.push("/form");
            //         } else {
            //             console.log('将跳转路径存入公共数据，去登陆');
            //             this.setRedirectUrl('/form');
            //             this.$router.push("/login");
            //         }
            //         break;
            // }
        });
    },
    beforeCreate() {
        console.log("list beforeCreate");
    },
    created() {
        console.log("list created");
        this.$store.commit("toggleToast", "数据加载好了");
        this.confirmed = false;
    },
    updated() {
        console.log("list update");
    },
    beforeRouteEnter(to, from, next) {
        console.log("list beforeRouteEnter");
        next((vm) => {
            console.log("想看一下这个在何时执行？");
        });
    },
    beforeRouteUpdate(to, from, next) {
        console.log("list beforeRouteUpdate");
        console.log(this.$route.params);
        // 居然没变化？
        next();
    },
    beforeRouteLeave(to, from, next) {
        console.log('list 页面滚动条位置：');
        console.log(document.documentElement.scrollTop||document.body.scrollTop);
        // 是不是这个导致？ popup 确认是异步的，如何确定？
        console.log("list beforeRouteLeave");
        // 还没确认，且 popup 未弹出，则需要弹出询问是否真的要离开
        if (!this.confirmed && !this.$store.state.showPopup) {
            this.$store.commit("setPopCon", "确认要离开？");
            this.$store.commit("togglePop");
            // 设置 popup 的操作
            let self = this;
            this.$store.commit("setPopConf", {
                btns: [
                    {
                        text: "取消",
                        type: "cancel",
                        show: true,
                    },
                    {
                        text: "确定",
                        type: "ok",
                        show: true,
                        action: function (btn) {
                            // 那么问题来了，如何继续触发？next()?
                            self.confirmed = true;
                            // 回退离开
                            // url 直接变化
                            // $router.push 离开
                            console.log("我要离开了： " + to.path);
                            // 试一下哈
                            // next(to.path)
                            next();
                        },
                    },
                ],
            });
            // return false;
            // next 自己可行？
            console.log(from.params.id);
            // next 自己会不会 更新？
            console.log("next 了 我自己");
            next(false);
        }else{
            next();
        }
    },
    watch: {
        $route: function (nv, ov) {
            // 不能监听的更具体？
            console.log("触发 了吗？");
            if (nv !== ov) {
                console.log("$route.params 变化了：");
                console.log(nv);
            }
        },
    },
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "../../components/common/var.less";

.P-index {
    width: 100%;
    height: 100%;
    .t {
        text-align: center;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .cell {
            flex: 1;
            font-size: 28px;
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            .btn();
        }
    }

    .theme {
        margin-top: 20px;
        justify-content: center;
        button:first-of-type {
            margin-right: 20px;
        }
    }

    .tip {
        background: #efefef;
        color: #414141;
        font-size: 28px;
        padding: 20px;
        border-radius: 10px;
        line-height: 1.6em;
        margin: 20px 10px 0;
    }

    .pic {
        display: flex;
        align-items: center;
        justify-content: space-around;
        image,
        view {
            width: 100px;
            height: 100px;
            border: 10px solid @btnColor;
            border-radius: 10px;
        }
        .view {
            background: url("./_src/ali.jpg") scroll no-repeat center center
                transparent;
        }
    }
}
</style>